<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=yes" />
    <meta name="description" content="home" />
    <meta name="author" content="lijinbo" />
    <title>deer首页</title>
    <link rel="icon" href="/images/icons/home_icon.ico" />
    <link rel="stylesheet" href="/css/css3-flex.css" />
    <link rel="stylesheet" href="/css/normalize.css_v8.0.1.css" />
    <link rel="stylesheet" href="/css/pagecss/index.css" />
    <script src="/js/jq1.11.3.min.js"></script>
    <script src="/js/vue2.6.10.min.js"></script>
    <script src="/js/jqajax.js"></script>
  </head>

  <body>
    <div id="app">
      <h1 class="home_title" @click="showMore">首页</h1>
      <div class="content jc as">
        <ul v-for="(item, index) in list" :key="index" class="nev_list">
          <li
            v-for="(e, i) in item.children"
            :key="i"
            @click="linkPageInfo(e.url)"
          >
            {{ e.title }}
          </li>
        </ul>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data() {
        return {
          list: []
        }
      },
      created() {
        // 获取导航列表
        apiGet('/home/navlist').then((res) => {
          this.list = res.data
        })
      },
      methods: {
        // 跳转到页面详情
        linkPageInfo(url) {
          location.href = url
        },
        showMore() {
          if (this.list.some((e) => e.title == 'more')) return
          apiGet('/home/getWebPage').then((res) => {
            this.list.push({
              title: 'more',
              children: res.data.map((e) => ({ title: e, url: `/webpage${e}` }))
            })
          })
        }
      }
    })
  </script>
</html>
